import { defineComponent, reactive } from "vue";
import styles from "./ExportApplicate.module.less";
export default defineComponent({
  name:'userCenterExportApplicate',
  setup() {
    const filterForm = reactive({
      orderType: undefined, //订单类型
      data: [],//申请时间
      type: "1",//状态
      orderTypes: [
        {
          label: '意外险',
          value: '1',
        },
        {
          label: '航意险',
          value: '2',
        },
        {
          label: '责任险',
          value: '3',
        },
      ],
      types: [
        {
          label: '全部',
          value: '1',
        },
        {
          label: '待生成',
          value: '2',
        },
        {
          label: '生成中',
          value: '3',
        },
        {
          label: '已完成',
          value: '4',
        },
        {
          label: '生成失败',
          value: '5',
        },
      ],
    })

    const search = () => {

    }
    const Filter = () => (
      <div class={styles['exportApplicate-filter']}>
        <a-form class={styles['filter-form']}>
          <span>订单类型：</span>
          <a-select
            placeholder="请选择"
            v-model={[filterForm.orderType, "value"]}
            options={filterForm.orderTypes}
            style="width:15%;margin-right:10px;"
          >
          </a-select>
          <span>申请时间：</span>
          <a-range-picker v-model:value={[filterForm.data]} valueFormat="YYYY-MM-DD" style="margin-left: 10px;margin-right:10px;"></a-range-picker>
          <span>状态：</span>
          <a-select
            v-model={[filterForm.type, "value"]}
            options={filterForm.types}
            style="width:15%;margin-left: 10px;"
          >
          </a-select>
          <a-button class={styles.button} onClick={() => { search() }}>搜索</a-button>
        </a-form>
      </div>
    )

    const state = reactive({
      list: [],
    })

    return () => (
      <div class={styles.exportApplicate}>
        <div class={styles['header-box']}>订单导出历史</div>
        <div class={styles['exportApplicate-content']}>
          <Filter />
          <div class={styles['exportApplicate-thead']}>
            <div class={styles.col}>序号</div>
            <div class={[styles.col, styles.time]}>申请时间</div>
            <div class={[styles.col, styles.condition]}>申请时查询条件</div>
            <div class={[styles.col, styles.type]}>类型</div>
            <div class={[styles.col, styles.status]}>状态</div>
            <div class={styles.col}>操作</div>
          </div>
          {
            state.list.length === 0 ?
              <div class={styles['no-message']}>
                <span>暂无数据</span>
              </div> :
              <div></div>
          }
        </div>
      </div>
    )
  }
})